<template>
  <div class="photo-detail">
    <el-row :gutter="20" style="height: 80vh; width: 80%; margin: 0 auto;">
      <!-- 左边：图片区域 -->
      <el-col :span="12" style="height: 100%;">
        <el-image
          style="width: 100%; height: 100%; object-fit: cover;"
          :src="photoData.url"
          :preview-src-list="[photoData.url]"
          :lazy="true"
          :initial-index="0"
          :fit="cover"
          :alt="photoData.name"
          :src-placeholder="photoData.thumbnail_url"
        />
      </el-col>

      <!-- 右边：字段信息区域 -->
      <el-col :span="12" style="height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
        <div>
          <h3>{{ photoData.name }}</h3>
          <p>{{ photoData.description }}</p>
        </div>
        <div class="bottom">
          <div>
            <span class="label">作者:</span>
            <span>{{ photoData.author }}</span>
          </div>
          <div>
            <span class="label">状态:</span>
            <span>{{ photoData.public ? '公开' : '私有' }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 定义照片数据的响应式变量
const photoData = ref({
  author_id: '',
  photo_id: '',
  public: 0,
  url: '',
  thumbnail_url: '',
  author: '',
  name: '',
  description: ''
})

onMounted(() => {
  const id = route.params.id
  // 根据 id 获取图片的详细信息
  // 这里可以使用 API 请求或其他方式获取数据
  // 示例数据
  photoData.value = {
    author_id: '12345',
    photo_id: id,
    public: 0,
    url: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
    thumbnail_url: 'https://example.com/thumbnail.jpg',
    author: 'John Doe',
    name: '示例图片',
    description: '这是一个示例图片的详细描述。'
  }
})
</script>

<style scoped>
.photo-detail {
  padding: 20px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.label {
  font-weight: bold;
  margin-right: 5px;
}
</style>